// Created by 王亮 on 2025/2/8.

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_demo/pages/one/one_page_view_model.dart';
import 'package:go_router/go_router.dart';
import 'package:mvvm_plus/mvvm_plus.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

class OnePage extends ViewWidget<OnePageViewModel> {
  OnePage({super.key, Map<String, String>? data})
      : super(builder: () => OnePageViewModel(data));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () {
            context.pop();
          },
        ),
        title: const Text('Page One'),
        centerTitle: true,
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return Stack(
      children: [_buildList()],
    );
  }

  Widget _buildList() {
    return SmartRefresher(
      controller: viewModel.refreshController,
      enablePullDown: true,
      enablePullUp: viewModel.enablePullUp,
      onRefresh: () {
        viewModel.refreshData();
      },
      onLoading: () {
        viewModel.loadData();
      },
      child: ListView.builder(
        itemCount: viewModel.articles.length,
        itemBuilder: (context, index) {
          return _buildArticle(index);
        },
      ),
    );
  }

  Widget _buildArticle(int index) {
    if (index >= viewModel.articles.length) {
      return Container();
    }
    var article = viewModel.articles[index];
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          margin: const EdgeInsets.only(left: 16, top: 16, right: 16),
          child: Text("${index + 1} ''"),
        ),
        Container(
          margin: const EdgeInsets.only(left: 16, top: 16, right: 16),
          child: const CircleAvatar(
            radius: 50,
            backgroundColor: Colors.white,
            backgroundImage: CachedNetworkImageProvider(
                "https://gips2.baidu.com/it/u=1192674964,3939660937&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"),
          ),
        ),
        Container(
          margin: const EdgeInsets.only(left: 16, top: 16, right: 16),
          width: 200,
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
          ),
          child: CachedNetworkImage(
            progressIndicatorBuilder: (context, url, progress) => Center(
              child: CircularProgressIndicator(
                value: progress.progress,
              ),
            ),
            imageUrl:
                'https://gips2.baidu.com/it/u=1192674964,3939660937&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
          ),
        ),
        Container(
          margin: const EdgeInsets.only(top: 16),
          width: double.infinity,
          height: 1,
          color: const Color(0xFFDDDDDD),
        ),
      ],
    );
  }
}
